import { Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

const ICON_COLOR = '#2f1f2b';

type BackButtonProps = {
  onPress?: () => void;
  fallbackTo?: string;
};

export function BackButton({ onPress, fallbackTo }: BackButtonProps) {
  const router = useRouter();

  const handlePress = () => {
    if (onPress) {
      onPress();
      return;
    }
    if (router.canGoBack()) {
      router.back();
      return;
    }
    if (fallbackTo) {
      router.replace(fallbackTo);
    }
  };

  return (
    <Pressable
      onPress={handlePress}
      hitSlop={12}
      style={{ padding: 4 }}
      accessibilityRole="button"
      accessibilityLabel="返回上一页"
    >
      <Ionicons name="chevron-back" size={24} color={ICON_COLOR} />
    </Pressable>
  );
}
